<template>
	<view>
		<view class="launch-top">
			<view class="shop-info">
				<image v-if="goodsInfo.pic != null && goodsInfo.pic.pic_cover_mid != null" :src="$util.img(goodsInfo.pic.pic_cover_mid)"></image>
				<view class="shop-detail">
					<view class="shop-title">{{ goodsInfo.goods_name }}</view>
					<view class="flex-box">
						<text class="uni-bold ns-text-color ns-font-size-lg">￥{{ goodsInfo.price }}元</text>
						<text class="ns-text-color-gray ns-font-size-sm" v-if="bargainGoodsInfo != null">
							{{ bargainGoodsInfo.fictitious_sales + bargainGoodsInfo.sales }}人已参与
						</text>
					</view>
					<view class="price ">
						最低可砍至
						<text class="uni-bold ns-text-color ns-font-size-lg">{{ launchInfo.bargain_min_money }}</text>
						元
					</view>
				</view>
			</view>
			<view class="launch-now uni-bold" v-if="launchInfo.status == 1">
				已砍
				<text class="ns-text-color ns-font-size-lg">{{ launchInfo.bargain_money }}</text>
				元还差
				<text class="ns-text-color ns-font-size-lg">{{ launchInfo.surplus }}</text>
				元
			</view>
			<view v-if="launchInfo.status == 1">
				<button v-if="isSelf == 1" type="primary">分享给好友，多砍一刀</button>
				<button v-else-if="isMaxPartake == 1" type="primary" @click="jump_bargain()">我也要免费拿</button>
				<button v-else type="primary" @click="friend_brafain()">帮他砍一刀</button>
			</view>

			<view class="time-wrap">
				<view v-if="launchInfo.status == 1 && timeOver == false">
					<text>还剩</text>
					<uni-count-down
						class="time"
						:day="timeMachine.d"
						:hour="timeMachine.h"
						:minute="timeMachine.i"
						:second="timeMachine.s"
						color="#333"
						splitorColor="#333"
						background-color="transparent"
						border-color="transparent"
					/>
					<text>结束，快来砍价吧~</text>
				</view>
				<view v-else-if="launchInfo.status == 2 || timeOver == true">砍价已结束</view>
				<view v-else>砍价已取消</view>
			</view>
		</view>

		<view class="launch-bottom ns-margin-top">
			<view class="road uni-bold">砍价记录</view>
			<view class="user" v-for="(item, index) in userList" :key="index">
				<view class="username-wrap">
					<image lazy-load="true" :src="item.user_info.user_headimg ? $util.img(item.user_info.user_headimg) : $util.img('upload/uniapp/default_head.png')"></image>
					<view class="username">{{ item.user_info.nick_name }}</view>
				</view>
				<view>
					砍掉
					<text class="ns-text-color uni-bold">{{ item.bargain_money }}</text>
					元
				</view>
			</view>
		</view>
		<ns-login ref="login" href="bargain_launch"></ns-login>
		<loading-cover ref="loadingCover"></loading-cover>
		<view class="launch-mask" @click="cancel_mask('mask')" v-if="mask.switch == true">
			<view class="mask-img">
				<image :src="$util.img('upload/uniapp/member/invite_friends_share.png')" mode="aspectFit"></image>
			</view>
			<view class="mask-word">
				已砍
				<text>{{ launchInfo.bargain_money }}</text>
				元，点击右上角发送给好友
			</view>
		</view>
	</view>
</template>

<script>
import http from 'common/js/http.js';
import uniCountDown from '@/components/uni-count-down/uni-count-down.vue';
import loadingCover from '@/components/loading/loading.vue';
import nsLogin from 'components/ns-login/ns-login.vue';
import { Weixin } from 'common/js/wx-jssdk.js';

export default {
	components: {
		uniCountDown,
		loadingCover,
		nsLogin
	},
	data() {
		return {
			launchId: 0,
			partakeInfo: [],
			userList: [],
			bargainGoodsInfo: {
				fictitious_sales: ''
			},
			goodsInfo: {
				pic: {
					pic_cover_mid: ''
				},
				price: ''
			},
			launchInfo: [],
			userInfo: [],
			currentTime: '',
			timeMachine: [],
			isSelf: '',
			isMaxPartake: '',
			timeOver: false,
			mask: {				
				switch: true
			}
		};
	},
	onLoad(e) {
		this.launchId = e.launch_id;
	},
	onShow() {
		var isLogin = false;
		// #ifdef H5
		getApp().checkLogin(() => {
			isLogin = true;
			setTimeout(() => {
				this.$refs.login.clickLogin();
			}, 100);
		});
		// #endif
		// #ifdef MP
		getApp().$vm.checkLogin(() => {
			isLogin = true;
			this.$refs.login.clickLogin();
		});
		// #endif

		if (isLogin) return;

		this.getBargainDetail();
	},
	mixins: [http],
	methods: {
		getBargainDetail() {
			this.sendRequest({
				url: 'NsBargain.Bargain.bargainDetail',
				data: {
					launch_id: this.launchId
				},
				success: res => {
					if (res.data != null) {
						this.bargainGoodsInfo = res.data.bargain_goods_info;
						this.isSelf = res.data.is_self;
						this.isMaxPartake = res.data.is_max_partake;
						let launch_info = res.data.launch_info;
						this.launchInfo = launch_info;
						this.currentTime = res.data.current_time / 1000;
						if (launch_info.end_time - this.currentTime <= 0) {
							this.timeOver = true;
						}
						this.userList = res.data.partake_list;
						this.userInfo = res.data.user_info;

						let time = this.$util.countDown(launch_info.end_time - this.currentTime);
						this.timeMachine = time;
						if (res.data.goods_info != null) {
							this.goodsInfo = res.data.goods_info;
							if (res.data.goods_info.pic == null) {
								this.goodsInfo.pic = {};
							}
						}
						if (this.$refs.loadingCover == undefined) return;
						this.$refs.loadingCover.hide();
					}
				}
			});
		},
		jump_bargain() {
			this.$util.redirectTo('/promotionpages/bargain/list/list');
		},
		friend_brafain() {
			this.sendRequest({
				url: 'NsBargain.Bargain.helpBargain',
				data: {
					launch_id: this.launchId
				},
				success: res => {
					if (res.code == 0) {
						if (res.data.data == '-9001') {
							this.$util.showToast({
								title: '当前砍价已结束'
							});
						} else if (res.data.data == '-9002') {
							this.$util.showToast({
								title: '您已参加过当前砍价'
							});
						} else if (res.data.data > 0) {
							this.$util.showToast({
								title: '帮好友砍价成功'
							});
							this.getBargainDetail();
						}
					} else {
						this.$util.showToast({
							title: '砍价失败'
						});
					}
				}
			});
		},
		cancel_mask(){
			this.mask.switch = false;
		}
	},
	/**
	 * 自定义分享内容
	 * @param {Object} res
	 */
	onShareAppMessage(res) {
		if (this.launchInfo.status == 1 && this.timeOver == false) {
			return {
				title: '快来帮我砍一刀，' + this.goodsInfo.goods_name,
				imageUrl: this.$util.img(this.goodsInfo.pic.pic_cover_mid),
				path: '/promotionpages/bargain/launch/launch?launch_id=' + this.launchId,
				success: res => {
					this.sendRequest({
						url: 'NsMemberShare.MemberShare.shareReward'
					})
				},
				fail: res => {}
			};
		} else {
			this.$util.showToast({
				title: '砍价已结束'
			});
			return false;
		}
	},
	onReady() {
		// 微信公众号分享
		// #ifdef H5
		if (this.$util.isWeiXin()) {
			this.sendRequest({
				url: 'System.WchatPublic.getJsApiConfig',
				data : {
					url: window.location.href
				},
				success: jsApiRes => {
					if (jsApiRes.code == 0) {
						var wxJS = new Weixin();
						wxJS.init(jsApiRes.data);
						
						this.sendRequest({
							url: 'System.Member.shareContents',
							data: {
								flag: 'bargain',
								launch_id: this.launchId,
							},
							success: res => {
								if (res.data) {
									wxJS.updateAppMessageShareData({
										title: res.data.share_title,
										desc: res.data.share_contents + '\r\n' + res.data.share_nick_name + '\r\n',
										link: res.data.share_url,
										imgUrl: res.data.share_img,
									}, () => {
										this.sendRequest({
											url: 'NsMemberShare.MemberShare.shareReward'
										})
									})
								}
							}
						})
					}
				}
			})
		}
		// #endif
	}
};
</script>

<style lang="scss">
page {
	padding: 30rpx;
	box-sizing: border-box;
	height: 100vh;
	background: $base-color;
	button {
		box-shadow: 2rpx 4rpx 10rpx rgba(0, 0, 0, 0.3);
	}
	.launch-top {
		padding: 30rpx;
		border-radius: 10rpx;
		background: #fff;
		box-sizing: border-box;

		button {
			color: #fff;
		}

		.shop-info {
			position: relative;
			padding-left: 210rpx;
			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 6rpx;
				position: absolute;
				top: 0;
				left: 0;
			}

			.shop-detail {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 386rpx;
				height: 200rpx;

				.shop-title {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					line-height: 1.5;
				}
				.flex-box {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
		}

		.launch-now {
			text-align: center;
			margin: 40rpx auto 20rpx;
		}
	}
	.time-wrap {
		margin-top: 20rpx;
		text-align: center;
	}
	.launch-bottom {
		padding: 30rpx;
		border-radius: 10rpx;
		background: #fff;
		box-sizing: border-box;

		.road {
			line-height: 86rpx;
			border-bottom: 1px solid $base-color;
			text-align: center;
			color: $base-color;
		}

		.user {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: $ns-padding;
			border-bottom: 2rpx solid $ns-border-color-gray;

			.username-wrap {
				display: flex;
				align-items: center;
				line-height: 90rpx;
				max-width: 60%;
				image {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					margin-right: $ns-margin;
				}
				.username {
					display: block;
					max-width: 60%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
		.user:nth-last-child(1) {
			border-bottom: none;
		}
	}
}

.time {
	border-radius: 10rpx;
	padding: 0 10rpx;
}
.launch-mask{
	position:fixed;
	top:0px;
	left: 0px;
	width:100%;
	height: 100%;
	background:rgba(0,0,0,0.8);
	.mask-img{
		text-align: right;
		margin:10% 10px 10px 30px;
		image{
			width: 50px;
			height:117px;
			margin-right:14%
		}
	}
	.mask-word{
		color: #fff;
		text-align: center;
		font-weight: bold;
		font-size: 18px;
		text{
			color:#FF0036 !important
		}
	}
}
</style>
<style scoped>
>>> .uni-countdown__number,
>>> .uni-countdown__splitor {
	margin: 0;
	padding: 0;
	font-size: 28rpx;
}
</style>
